<template>
  <!-- 仪表图 -->
  <div id="RadarChart">
    <div ref="chart01" class="chart01"></div>
  </div>
</template>

<script>
import { title } from 'process';

export default {
  name: "RadarChart",
  components: {},
  props: {},
  data() {
    return {
      value: 60
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.drawRadarChart();
  },

  methods: {
    drawRadarChart() {
      let that = this;
      let mychart = that.$echarts.init(that.$refs.chart01);
      let option = {
        // grid: {
        //   //设置图表撑满整个画布
        //   left: '10%' ,
        //   top: '10%' ,
        //   right: '10%' ,
        //   bottom: 60 ,
        // },
        series: [
          {
            startAngle:210, //仪表盘开始位置
            endAngle: -30,  //仪表盘末尾位置
            type: "gauge",
            center: ["50%","50%"], //仪表盘的位置
            radius: "88%", //仪表盘的大小
            // 仪表盘轴线相关配置。
            axisLine: {
              lineStyle: {
                width: 16,
                color: [[0.3, "#71C184"],[0.7, "#F5DE5A"],[1.2, "#FF7372"]],
              },
            },
            top: "0",
            // 仪表盘分割刻度
            splitLine:{
              show: true,
              length: 15,
              distance: -16,
              lineStyle: {
                color: "#fff"
              }
            },
            // 仪表盘刻度
            axisTick: {
              show: true, //去除仪表盘上的刻度
              distance: 0,
            },
            // 标题设置
            title:{
              offsetCenter: [0, '40%'],
              color: "#fff",
              fontSize: 14,
            },
            // 数据设置
            detail: {
              color: "#fff",
              fontSize: 16,
              offsetCenter: [0, '40%'],
            },
            // 指针的样式
            itemStyle: {
              color: "#6A98FB"
            },
            // 指针的配置
            anchor: {
              show: true,
              showAbove: true,
              color: "fff",
              size: 12,
              itemStyle: {
                borderWidth: 5
              }
            },
            // 刻度数值标签
            axisLabel:{
              show: false
            },
            //仪表盘指针
            pointer:{
              showAbove: false,
              length: "70%",
              width: 4,
            },
            
            data: [
              {
                value: 50,
                // name: "平时综合保障指数",
              },
            ],
            //展示当前进度5.0开始支持目前用不到
            // progress: {
            //   show: true,
            //   width: 20
            // },
          },
        ],
      };
      mychart.setOption(option);
      //   窗口自适应
      setTimeout(() => {
        let resizeFn = function () {
          mychart.resize();
        };
        window.addEventListener("resize", resizeFn);
        this.$once("hook:beforeDestroy", () => {
          mychart.dispose();
          mychart = null;
          window.removeEventListener("resize", resizeFn);
        });
      }, 200);
    },
  },
};
</script>
<style lang='less' scoped>
#RadarChart {
  width: 100%;
  height: 100%;
  // margin-top: 36px;
  .chart01 {
    width: 100%;
    height: 100%;
    overflow: hidden;
    clear: both;
  }
}
</style>